<template>
    <div>
        <header>
            <div class="hedbox clear">
                <div class="hedLeft">
                    <a href="#"></a>
                    <img class="hedlimg" src="https://js2.epy.wpscdn.cn/security/da_banner.png" alt="">
                </div>
                <ul class="hedRight clear">
                    <li><a href="#">所有产品</a><span></span></li>
                    <li><a href="#">政企服务</a></li>
                    <li><a href="#">中小企业</a></li>
                    <li><a href="#">会员服务</a></li>
                    <li><a href="#">客服中心</a></li>
                    <li><a href="#">生态合作</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div>
        </header>
        <ul class="flex">
            <li><img src="./8.12img/1.png" alt=""></li>
            <li><img src="./8.12img/2.png" alt=""></li>
            <li><img src="./8.12img/3.png" alt=""></li>
        </ul>
    </div>
</template>
<style>
    *{padding: 0;margin: 0;}
    a{text-decoration: none;}
    ul{list-style: none;}
    .clear{
        display: block;
        clear: both;
        content: "";
    }
    header{
        width: 100%;
        background: #f7fafc;
        box-shadow: 0 6px 20px 0 rgb(102 128 158 / 10%), 0 1px 0 0 #e4ebf2;
        opacity: .96;
        height: 72px;
        position: fixed;
        top: 0px;
        width: 100%;
        left: 0px;
        z-index: 100;
        transition: all 0.4s ease 0s;
    }
    .hedbox{
        width: 1188px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 100;
    }
    .hedLeft{height: 72px;line-height: 75px;}
    .hedLeft a{
        width: 312px;
        height: 28px;
        display: inline-block;
        background-image: url('https://qn.cache.wpscdn.cn/encs/wpscn/images/home/logo-dah.2e5a4add.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .hedRight{
     display: flex;  
     justify-content: space-around;
    }
    .hedRight li{line-height: 72px;margin:  0 10px;}
    .hedRight a{color: #000;display: inline-block;height: 72px;border-top: 2px solid transparent;transition: all 0.1s;}
    .hedRight span{
        width: 8px;
        height: 5px;
        background-size: 100% 100%;
        background-image: url('https://qn.cache.wpscdn.cn/encs/wpscn/images/assets/drop-down.7bd5ac5a.png');
        margin-left: 8px;
        display: inline-block;
    }
    .hedRight a:hover{
        border-top: 2px solid #000;
    }
    .hedlimg{
        position: absolute;
        left: -180px;
        top:0;
        height: 0;
        width: 1700px;
        z-index: -10;
        transition: all 0.1s;
    }
    .hedLeft a:hover+.hedlimg{height: 453px;}
    .flex{
        display: flex;
        width: 1188px;
        height: 500px;
        margin: 72px auto;
        justify-content: center;
    }
    .flex li:nth-child(2) img,.flex li:nth-child(3) img{width: 388px; height: 500px;}
    .flex li{margin-right: 10px;}
    .flex li:nth-child(1){width: 588px;max-width: 588px;}
    .flex li:nth-child(2),.flex li:nth-child(3){overflow: hidden;width: 288px;min-width: 288px;}
    .flex li:nth-child(2):hover,.flex li:nth-child(3):hover{
        width: 388px;
        transition: all 0.5s
    }

</style>
